import { Modal, Button, Grid } from '@arco-design/web-react';
import React, { ReactNode } from 'react';

const { Row } = Grid;
interface Props {
  className?: string;
  contentClassName?: string;
  children?: ReactNode;
  title: string;
  onConfirm?: () => void;
  onCancel?: () => void;
  show?: boolean;
  cancelText?: string;
  confirmText?: string;
  cancelBtnShow?: boolean;
  confirmBtnShow?: boolean;
}
export default function DetailModal({
  children,
  title,
  show,
  onCancel,
  onConfirm,
  cancelText = '取消',
  confirmText = '确定',
  cancelBtnShow = true,
  confirmBtnShow = true,
  className = '',
  contentClassName = '',
}: Props) {
  if (!show) return null;
  return (
    <Modal
      className={className}
      title={title}
      visible={true}
      onCancel={onCancel}
      escToExit
      footer={
        <>
          {cancelBtnShow && <Button onClick={() => onCancel && onCancel()}>{cancelText}</Button>}
          {confirmBtnShow && (
            <Button type="primary" onClick={() => onConfirm && onConfirm()}>
              {confirmText}
            </Button>
          )}
        </>
      }
    >
      <Row className={`maxh-500 scroll-bar-h-min ${contentClassName} pr-20 pt-20`}>{children}</Row>
    </Modal>
  );
}
